<template>
  <div>
    <el-card>

      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row type="flex" justify="space-between">
        <div>
          <el-button size="small" icon="el-icon-plus" @click="addCategroy">添加</el-button>
          <el-button size="small" icon="el-icon-circle-check" @click="updateCate('1')">启用</el-button>
          <el-button size="small" icon="el-icon-circle-close" @click="updateCate('0')">禁用</el-button>
          <el-button size="small" icon="el-icon-delete" @click="updateCate('2')">删除</el-button>
        </div>
      </el-row>
      <el-table ref="cateList" height="70vh" align="center" :data="tableData" border style="width: 100%;margin-top:8px;"
        :header-cell-style="{ background: '#409EFF', color: '#FFF' }" @selection-change="selectChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="categoryId" label="编号" width="100"></el-table-column>
        <el-table-column label="图片">
          <template slot-scope="prop">
            <el-image fit style="width:50px;height:50px;" :src="path + prop.row.categoryPic" :previewSrcList="[
              path + prop.row.categoryPic]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="分类名称"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="prop">
            <el-tag v-if="prop.row.categoryStatus == 0" type="danger">已禁用</el-tag>
            <el-tag v-if="prop.row.categoryStatus == 1" type="success">已启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="prop">
            <el-button icon="el-icon-edit" type="primary" size="small" @click="edit(prop.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="详情" :visible.sync="dialog">
      <el-form :model="categroy" label-width="80px" ref="categroy">
        <el-form-item label="名称" prop="categroy_name" :rules="{ required: true, message: '请填写名称', trigger: 'change' }">
          <el-input v-model="categroy.categroy_name" clearable style="width:220px;" placeholder="输入名字"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="cateStatus">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图标" prop="file">
          <img :src="cateImg" alt="" v-if="categroy.flag == 'edit' && cateImg != ''" class="cateImgBox">
          <el-upload class="upload-demo" action="aa" :on-change="picChange" list-type="picture" :auto-upload="false"
            name="file" accept="*" :limit="1" ref="addFile">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">*请上传小于2M的jpg文件</div>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBox">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategroy,
  addCategroy,
  deleteCategroy,
  updateCategory,
} from "network/product";
export default {
  data() {
    return {
      path: "https://zbz-imgs.oss-cn-beijing.aliyuncs.com/zhonghui/category/",
      tableData: [],
      dialog: false,
      checkList: [],
      categroy: {
        categoryId: '',
        categroy_name: "",
        flag: "",
        file: "",
      },
      cateImg: '',
      cateStatus: '1',
      page: 1,
      size: 20,
      total: 0
    };
  },
  methods: {
    // 获取分类列表
    getList() {
      getCategroy({
        shopId: sessionStorage.shop_id
      }).then(res => {
        console.log(res);
        this.tableData = res.data
      });
    },


    selectChange(val) {
      this.checkList = val;
    },

    addSubmit() {
      this.$refs.categroy.validate(valid => {
        if (!valid) return false;
        let fd = new FormData();

        if (this.categroy.flag == 'add' && this.categroy.file == '') {
          this.$message.warning('请上传分类图片')
          return
        }
        if (this.categroy.flag == 'add' && this.cateImg == '' && this.categroy.file == '') {
          this.$message.warning('请上传分类图片')
          return
        }
        console.log(this.categroy);
        console.log(this.cateStatus);

        fd.append("categoryName", this.categroy.categroy_name);
        fd.append("categoryStatus", this.cateStatus);
        fd.append("shopId", sessionStorage.shop_id);
        fd.append("flag", this.categroy.flag);


        console.log(this.categroy);

        if (this.categroy.flag == 'edit') {
          fd.append("categoryId", this.categroy.categoryId);
          if (this.cateImg == '') {
            fd.append("file", this.categroy.file);
          }
        } else {
          fd.append("file", this.categroy.file);
        }

        addCategroy(fd).then(res => {
          console.log(res);
          if (res.flag) {
            this.getList();
            this.cancelBox();
            this.$message.success("上传成功");
          } else {
            console.log(res);
            this.$message.success("上传失败");
          }
        });
      });
    },
    cancelBox() {
      this.$refs.categroy.resetFields();
      this.$refs.addFile.clearFiles();

      this.dialog = false;
    },
    addCategroy() {
      this.categroy = {
        categroy_name: "",
        categroy_introduction: "",
        categroy_id: "",
        flag: "add",
        file: "",
        file2: "",
        file3: "",
        link_id: ""
      };
      this.dialog = true;
    },
    edit(row) {
      this.categroy = {
        categoryId: row.categoryId,
        categroy_name: row.categoryName,
        flag: "edit",
        file: "",
      };
      this.cateStatus = row.categoryStatus + ''
      this.cateImg = this.path + row.categoryPic
      this.dialog = true;
    },
    updateCate(status) {
      if (this.checkList.length === 0) {
        return this.$message.warning("请勾选要修改的数据");
      }
      let categroy_id = "";
      for (let i = 0; i < this.checkList.length; i++) {
        categroy_id += this.checkList[i].categoryId + ",";
      }
      if (status == 2) {
        deleteCategroy({
          cateIds: categroy_id,
        }).then(res => {
          console.log(res);
          if (res.flag) {
            this.$message.success('删除成功')
            this.getList();
          } else {
            this.$message.warning("操作失败！");
          }
        });
      } else {
        updateCategory({
          categoryStatus: status,
          cateIds: categroy_id,
        }).then(res => {
          console.log(res);
          if (res.flag) {
            this.$message.success('操作成功')
            this.getList();
          } else {
            this.$message.warning("操作失败！");
          }
        });
      }

    },

    picChange(file, fileList) {

      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      console.log(fileType);

      this.cateImg = ''
      this.categroy.file = file.raw;
    },

    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  },
  created: function () {
    this.getList();
  }
};
</script>

<style scoped>
.el-tabs {
  margin-top: 10px;
}

.tableTip {
  margin: 0 15px;
  color: red;
  font-size: 12px;
}

.cateImgBox {
  width: 80px;
  height: 80px;
}
</style>
